<template>
  <div class="cdnPicker">
    <el-date-picker
      :type="type"
      v-model="target"
      :value-format="format"
      :format="format"
      :value="modelValue"
      @change="$emit('update:modelValue', target)"
    />
  </div>

</template>

<script setup>
import { ref, watch } from "vue";

const prop = defineProps({
  modelValue: {
    type: String,
  },
  type: { // 类型
    type: String,
    default: 'date'
  }
});

let format = 'YYYY-MM-DD'; // 参数格式
if (prop.type == 'year') {
  format = 'YYYY';
} else if (prop.type == 'month') {
  format = 'YYYY-MM'
}

const target = ref(''); // 目标值
watch(() => prop.modelValue, (cur) => {
  target.value = cur;
})

</script>

<style lang="scss" scoped>
.cdnPicker {
  width: 120px;
  height: 36px;
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 120px;
    height: 36px;
  }
  :deep(.el-input__wrapper) {
    width: 200px;
    border: 1px solid #a7a7a7;
    border-radius: 4px;
    padding: 0 5px;
    width: 150px;
    height: 36px;
    outline: none;
    box-shadow: none;
    &:focus {
      border: 1px solid #48bcb9;
      transition: border 1s;
      -webkit-transition: border 1s;
    }
    .el-input__inner {
      cursor: default;
    }
  }

}
</style>